<template>
  <view class="chat-container safe-area">
    <!-- 聊天消息列表 -->
    <scroll-view class="chat-list" scroll-y :scroll-top="scrollTop" :scroll-with-animation="true" @scrolltoupper="onScrollToUpper">
      <view class="chat-item" v-for="(item, index) in chatList" :key="index">
        <!-- 用户消息 -->
        <view class="message user-message" v-if="item.role === 'user'">
          <view class="message-content">{{ item.content }}</view>
          <view class="avatar user-avatar">我</view>
        </view>
        <!-- AI消息 -->
        <view class="message ai-message" v-else>
          <view class="avatar ai-avatar">AI</view>
          <view class="message-content">{{ item.content }}</view>
        </view>
      </view>
    </scroll-view>

    <!-- 输入框区域 -->
    <view class="input-area">
      <input class="message-input" v-model="inputMessage" placeholder="请输入消息..." @confirm="sendMessage" />
      <button class="send-btn" :disabled="!inputMessage.trim()" @tap="sendMessage">发送</button>
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { sendMessageToAI } from '@/api/ai'

const chatList = ref([
  {
    role: 'assistant',
    content: '您好，我是AI助手，请问有什么可以帮助您的吗？'
  }
])
const inputMessage = ref('')
const scrollTop = ref(0)

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim()) return

  // 添加用户消息
  const userMessage = {
    role: 'user',
    content: inputMessage.value
  }
  chatList.value.push(userMessage)

  // 清空输入框
  const message = inputMessage.value
  inputMessage.value = ''

  // 滚动到底部
  await nextTick()
  scrollToBottom()

  try {
    // 显示AI正在输入
    chatList.value.push({
      role: 'assistant',
      content: '正在思考...'
    })

    // 发送请求到AI
    const response = await sendMessageToAI(message)

    // 更新AI回复
    chatList.value[chatList.value.length - 1] = {
      role: 'assistant',
      content: response.content
    }
  } catch (error) {
    // 处理错误
    chatList.value[chatList.value.length - 1] = {
      role: 'assistant',
      content: '抱歉，我遇到了一些问题，请稍后再试。'
    }
  }

  // 滚动到底部
  await nextTick()
  scrollToBottom()
}

// 滚动到底部
const scrollToBottom = () => {
  const query = uni.createSelectorQuery()
  query.select('.chat-list').boundingClientRect()
  query.exec((res) => {
    if (res[0]) {
      scrollTop.value = res[0].height
    }
  })
}

// 下拉加载更多历史消息
const onScrollToUpper = () => {
  // 这里可以实现加载历史消息的逻辑
}
</script>

<style lang="scss" scoped>
.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.chat-list {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.chat-item {
  margin-bottom: 20rpx;
}

.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.user-message {
  flex-direction: row-reverse;
}

.message-content {
  max-width: 70%;
  padding: 20rpx;
  border-radius: 10rpx;
  word-break: break-all;
}

.user-message .message-content {
  background-color: #007aff;
  color: #fff;
  margin-right: 20rpx;
}

.ai-message .message-content {
  background-color: #fff;
  color: #333;
  margin-left: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.user-avatar {
  background-color: #007aff;
  color: #fff;
  margin-right: 20rpx;
}

.ai-avatar {
  background-color: #42b983;
  color: #fff;
}

.input-area {
  padding: 20rpx;
  background-color: #fff;
  border-top: 2rpx solid #eee;
  display: flex;
  align-items: center;
}

.message-input {
  flex: 1;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 0 30rpx;
  margin-right: 20rpx;
}

.send-btn {
  width: 120rpx;
  height: 80rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;

  &:disabled {
    background-color: #ccc;
  }
}
</style>
